<template>
	<div class="system-edit-menu-container">
		<el-dialog
			v-model="state.isShowDialog"
			:close-on-click-modal="false"
			:title="(acType === 'add' ? '新增' : '修改') + '菜单'"
			width="769px"
		>
			<el-form ref="ruleFormRef" :model="state.ruleForm" :rules="state.rules" label-width="80px" size="default">
				<el-row :gutter="35">
					<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
						<el-form-item label="上级菜单">
							<el-cascader
								v-model="state.ruleForm.pid"
								:options="state.menuData"
								:props="{ label: 'title', value: 'id', checkStrictly: true, emitPath: false }"
								class="w100"
								clearable
								placeholder="请选择上级菜单"
							>
								<template #default="{ node, data }">
									<span>{{ data.title }}</span>
									<span v-if="!node.isLeaf">({{ data.children.length }})</span>
								</template>
							</el-cascader>
						</el-form-item>
					</el-col>
					<el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24" class="mb20">
						<el-form-item label="菜单类型" prop="menuType">
							<el-radio-group v-model="state.ruleForm.menuType">
								<el-radio value="0">目录</el-radio>
								<el-radio value="1">菜单</el-radio>
								<el-radio value="2">按钮</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
						<el-form-item label="菜单名称" prop="menuName">
							<el-input
								v-model="state.ruleForm.menuName"
								clearable
								placeholder="请填写菜单名称"
							></el-input>
						</el-form-item>
					</el-col>
					<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
						<el-form-item label="接口规则" prop="name">
							<el-input v-model="state.ruleForm.name" clearable placeholder="后端 aip 地址"></el-input>
						</el-form-item>
					</el-col>
					<template v-if="state.ruleForm.menuType === '0' || state.ruleForm.menuType === '1'">
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="路由路径" prop="path">
								<el-input
									v-model="state.ruleForm.path"
									clearable
									placeholder="路由中的 path 值"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="重定向">
								<el-input
									v-model="state.ruleForm.redirect"
									clearable
									placeholder="请输入路由重定向"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="菜单图标">
								<IconSelector v-model="state.ruleForm.icon" placeholder="请输入菜单图标" type="all" />
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="组件路径" prop="component">
								<el-input
									v-model="state.ruleForm.component"
									clearable
									placeholder="组件路径"
								></el-input>
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="链接地址">
								<el-input
									v-model="state.ruleForm.linkUrl"
									:disabled="state.ruleForm.isLink === 0"
									clearable
									placeholder="外链/内嵌时链接地址（http:xxx.com）"
								></el-input>
							</el-form-item>
						</el-col>
					</template>
					<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
						<el-form-item label="权限标识">
							<el-select
								v-model="state.ruleForm.roles"
								class="w100"
								clearable
								multiple
								placeholder="选择角色"
							>
								<el-option
									v-for="role in state.roles"
									:key="'role_' + role.id"
									:label="role.name"
									:value="role.id"
								></el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
						<el-form-item label="菜单排序">
							<el-input-number
								v-model="state.ruleForm.menuSort"
								class="w100"
								controls-position="right"
								placeholder="请输入排序"
							/>
						</el-form-item>
					</el-col>
					<template v-if="state.ruleForm.menuType === '0' || state.ruleForm.menuType === '1'">
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="是否隐藏">
								<el-radio-group v-model="state.ruleForm.isHide">
									<el-radio v-for="dict in visibleOptions" :key="dict.value" :value="dict.value">
										{{ dict.label }}
									</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="页面缓存">
								<el-radio-group v-model="state.ruleForm.isKeepAlive">
									<el-radio :value="1">缓存</el-radio>
									<el-radio :value="0">不缓存</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="是否固定">
								<el-radio-group v-model="state.ruleForm.isAffix">
									<el-radio :value="1">固定</el-radio>
									<el-radio :value="0">不固定</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="是否外链">
								<el-radio-group
									v-model="state.ruleForm.isLink"
									:disabled="state.ruleForm.isIframe === 1"
								>
									<el-radio :value="1">是</el-radio>
									<el-radio :value="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
						<el-col :lg="12" :md="12" :sm="12" :xl="12" :xs="24" class="mb20">
							<el-form-item label="是否内嵌">
								<el-radio-group v-model="state.ruleForm.isIframe" @change="onSelectIframeChange">
									<el-radio :value="1">是</el-radio>
									<el-radio :value="0">否</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</template>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button size="default" @click="onCancel">取 消</el-button>
					<el-button :loading="state.loading" size="default" type="primary" @click="onSubmit">
						{{ acType === 'add' ? '新 增' : '修 改' }}
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { getCurrentInstance, reactive, ref, unref, nextTick } from 'vue'
import { getMenuParams, addMenu, getMenuInfo, updateMenu } from '/@/api/system/menu'
import IconSelector from '/@/components/iconSelector/index.vue'
import { refreshBackEndControlRoutes } from '/@/router/backEnd'
import { ElMessage } from 'element-plus'

const props = defineProps({
	visibleOptions: {
		type: Array,
		default: () => [],
	},
	acType: {
		type: String,
		default: () => 'add',
	},
})

const ruleFormRef = ref()
const { proxy } = getCurrentInstance()
const state = reactive({
	loading: false,
	isShowDialog: false,
	roles: [],
	// 参数请参考 `/src/router/route.ts` 中的 `dynamicRoutes` 路由菜单格式
	ruleForm: {
		id: undefined,
		pid: 0, // 上级菜单
		menuType: '0', // 菜单类型
		menuName: '', // 菜单名称
		name: '', // 接口规则
		component: '', // 组件路径
		isLink: 0, // 是否外链
		menuSort: 0, // 菜单排序
		path: '', // 路由路径
		redirect: '', // 路由重定向，有子集 children 时
		icon: '', // 菜单图标
		roles: [], // 权限标识，取角色管理
		isHide: '0', // 是否隐藏
		isKeepAlive: 1, // 是否缓存
		isAffix: 0, // 是否固定
		linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
		isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
	},
	// 表单校验
	rules: {
		parentId: [{ required: true, message: '父菜单不能为空', trigger: 'blur' }],
		name: [{ required: true, message: '接口规则不能为空', trigger: 'blur' }],
		path: [{ required: true, message: '路由地址不能为空', trigger: 'blur' }],
		menuName: [{ required: true, message: '菜单名称不能为空', trigger: 'blur' }],
		menuType: [{ required: true, message: '菜单类型不能为空', trigger: 'blur' }],
	},
	menuData: [], // 上级菜单数据
})

// 打开弹窗
const openDialog = (row) => {
	initForm()
	nextTick(() => {
		//获取角色信息
		getMenuParams().then((res) => {
			state.roles = res.data.roles
			const menu = { id: 0, title: '主类目', children: [] }
			menu.children = proxy.handleTree(res.data.menus, 'id', 'pid')
			state.menuData = new Array(menu)
		})
		if (row) {
			if (props.acType === 'add') {
				state.ruleForm.pid = row.id
			} else if (props.acType === 'edit') {
				getMenuInfo(row.id).then((res) => {
					const data = res.data.rule
					state.ruleForm = {
						id: data.id,
						pid: data.pid, // 上级菜单
						menuType: '' + data.menuType, // 菜单类型
						menuName: data.title, // 菜单名称
						name: data.name, // 接口规则
						component: data.component, // 组件路径
						isLink: data.isLink, // 是否外链
						menuSort: data.weigh, // 菜单排序
						path: data.path, // 路由路径
						redirect: data.redirect, // 路由重定向，有子集 children 时
						icon: data.icon, // 菜单图标
						roles: res.data.roleIds, // 权限标识，取角色管理
						isHide: '' + data.isHide, // 是否隐藏
						isKeepAlive: data.isCached, // 是否缓存
						isAffix: data.isAffix, // 是否固定
						linkUrl: data.linkUrl, // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
						isIframe: data.isIframe, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
					}
				})
			}
		}
		state.isShowDialog = true
		state.loading = false
	})
}
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false
}

// 是否内嵌下拉改变
const onSelectIframeChange = () => {
	if (state.ruleForm.isIframe === 1) state.ruleForm.isLink = 1
	else state.ruleForm.isLink = 0
}
// 取消
const onCancel = () => {
	closeDialog()
}

// 新增
const onSubmit = () => {
	const formWrap = unref(ruleFormRef)
	if (!formWrap) return
	formWrap.validate((valid) => {
		if (valid) {
			state.loading = true
			if (props.acType === 'add') {
				//添加
				addMenu(state.ruleForm)
					.then(() => {
						ElMessage.success('菜单添加成功')
						closeDialog() // 关闭弹窗
						resetMenuSession()
						emit('menuList')
					})
					.finally(() => {
						state.loading = false
					})
			} else {
				//修改
				updateMenu(state.ruleForm)
					.then(() => {
						ElMessage.success('菜单修改成功')
						closeDialog() // 关闭弹窗
						resetMenuSession()
						emit('menuList')
					})
					.finally(() => {
						state.loading = false
					})
			}
		}
	})
}
// 重置菜单session
const resetMenuSession = () => {
	refreshBackEndControlRoutes()
}
const initForm = () => {
	state.ruleForm = {
		id: undefined,
		pid: 0, // 上级菜单
		menuType: '0', // 菜单类型
		menuName: '', // 菜单名称
		name: '', // 接口规则
		component: '', // 组件路径
		isLink: 0, // 是否外链
		menuSort: 0, // 菜单排序
		path: '', // 路由路径
		redirect: '', // 路由重定向，有子集 children 时
		icon: '', // 菜单图标
		roles: [], // 权限标识，取角色管理
		isHide: '0', // 是否隐藏
		isKeepAlive: 1, // 是否缓存
		isAffix: 0, // 是否固定
		linkUrl: '', // 外链/内嵌时链接地址（http:xxx.com），开启外链条件，`1、isLink:true 2、链接地址不为空`
		isIframe: 0, // 是否内嵌，开启条件，`1、isIframe:true 2、链接地址不为空`
	}
}

defineExpose({ openDialog })

defineOptions({ name: 'systemEditMenu' })
</script>
